import React, { useEffect, useState } from 'react'
import {useNavigate} from 'react-router-dom'
import styles from './doctorList.module.scss'
import Header from '../../components/Header/Header'
import { MoreO } from '@react-vant/icons';
import http from '../../http';
import { Button ,Toast, Cell, Image } from 'react-vant';
import { createFromIconfontCN } from '@react-vant/icons'
import { debounce } from 'lodash';


export default function DoctorList() {
  const IconFont = createFromIconfontCN(
  '//at.alicdn.com/t/c/font_4410449_eb804a8q8j.js'
)
    const navigate=useNavigate()
    //医生科室列表
    interface doctorDepartmentType{
      departmentName:string,
      id:number,
      pic:string,
      rank:number
    }
    const [doctorDepartment,setdoctorDepartment]=useState<doctorDepartmentType[]>([])
    
   //排序数据
   interface sortType{
    name:string,
    id:number
   }
   const [sortList,setsortList]=useState<sortType[]>([
    {
      name:'综合',
      id:1,
    },
      {
      name:'好评',
      id:2,
    },
      {
      name:'咨询数',
      id:3,
    },
      {
      name:'价格',
      id:4,
    }
   ])
 // 查询问诊医生列表
 interface doctorListType{
  badNum?:number,
  doctorId?:number,
  doctorName?:string,
  imagePic?:string,
  inauguralHospital?:string,
  jobTitle?:string,
  praise?:string,
  praiseNum?:number,
  serverNum?:number,
  servicePrice?:number
 }
     const [doctorList,setdoctorList]=useState<doctorListType[]>([])
     const [Firstdoctor,setFirstdoctor]=useState<doctorListType>({})
     //医生列表页码
     const [doctorListPage,setdoctorListPage]=useState(1)
    useEffect(()=>{
    http.get('/health/share/knowledgeBase/v1/findDepartment').then((res:any)=>{
        if(res.status==='0000'){
          setdoctorDepartment(res.result)
          setDepartInd(res.result[0].id)
        }
    })
    },[])
 
    //点击科室列表
    const [DepartInd,setDepartInd]=useState<null|number>()
    const handelDepartmentList=(id:number)=>{
        setDepartInd(id)
      setdoctorListPage(1)
    }

    //点击排序渲染数据
    const [Ind,setInd]=useState(1)
    const handelSort=(id:number)=>{
     setInd(id)
    }
    
    //page分页
     //右侧按钮
     const handelRightPage=debounce(()=>{
    Toast.loading({
      message: '加载中...',
       forbidClick: true,
      duration: 800,
    })
      setdoctorListPage(doctorListPage+1)
 
     },100)
     
     //左侧按钮
     const handelLeftPage=()=>{
         Toast.loading({
            message: '加载中...',
            forbidClick: true,
             duration: 800,
          })
      setdoctorListPage(doctorListPage-1)

     }
     //第一条数据的id
     const [FirstInd,setFirstInd]=useState(0)
     //点击医生卡片重新渲染
     const handelDcotorCard=(ind:any)=>{
     console.log(ind);
     setFirstInd(ind)
     }
   

    // 查询问诊医生列表
   useEffect(()=>{
    // 查询问诊医生列表
    if(!DepartInd)return
    http.get('/health/user/inquiry/v1/findDoctorList',{params:{deptId:DepartInd,condition:Ind,page:doctorListPage,count:3}}).then((res:any)=>{
      console.log(res.result);
      setdoctorList(res.result)
      setFirstdoctor(res.result[FirstInd])
      // console.log(res.result[FirstInd]);
      
      
    })
    
    },[doctorListPage,DepartInd,Ind,FirstInd])

    //立即咨询
   const usesrInfo:any=  JSON.parse(localStorage.getItem('user') as string)
  //  console.log(usesrInfo.userId);
   
    const handelToseek=(doctorId:any)=>{
        http.put(`/health/user/inquiry/verify/v1/consultDoctor?doctorId=${doctorId}`).then((res:any)=>{
       
       
          if(res.status==='0000'){
           http.get('/health/user/inquiry/verify/v1/findCurrentInquiryRecord').then((res:any)=>{
            console.log(res.result);
             navigate( `/chatRroom?doctorId=${doctorId}&doctorName=${Firstdoctor.doctorName}&recordId=${res.result.recordId}&imagePic=${res.result.imagePic}`)
           })
          }
          
        })

  
    }
  return (
    <div >
       <Header center='doctor'></Header>
     <div className={styles.doctorDepartmentbox}>
        <ul className={styles.doctorDepartment}>
      {
        doctorDepartment.map((v,i)=>{
          return <li key={v.id}  onClick={()=>handelDepartmentList(v.id)} className={`${styles.DepartOnce} ${DepartInd===v.id?styles.active:''}`}>{v.departmentName}</li>
        })
      }
     </ul>
     </div>
            <ul className={styles.sortList}>
        {
          sortList.map((v,i)=>{
            return <li  key={v.id} onClick={()=>handelSort(v.id)} className={`${styles.SortOnce} ${Ind===v.id?styles.active:''}`}>{v.name}</li>
          })
        }
      </ul>

      <div className={styles.doctorCard}>
        <img src={Firstdoctor.imagePic} alt="" />
        <div className={styles.doctorCardMessage}>
         <div className={styles.doctorMessageTop}>
            <div className={styles.doctorMessage}>
            <div><span style={{fontWeight:'bold'}}>{Firstdoctor.doctorName} </span> <span style={{marginLeft:'20px'}}>{Firstdoctor.jobTitle} </span></div>
            <div>
              {Firstdoctor.inauguralHospital}
            </div>
            <div>
              <span>好评率:{Firstdoctor.praise}</span> <span>服务患者数量:{Firstdoctor.serverNum}</span>
            </div>
          </div>
          <div className={styles.doctorDeatil}>
            <MoreO  onClick={()=>navigate(`/doctor/${Firstdoctor.doctorId}`)} />
          </div>
         </div>
              <div className={styles.seekbox}>
          <div className={styles.seekprice}>
            <div>{Firstdoctor.servicePrice}H币/次</div>
          </div>
           <div className={styles.seekadvice}>
             <Button type='primary' className={styles.seekadvices} onClick={()=>handelToseek(Firstdoctor.doctorId)}>立即咨询</Button>
           </div>
        </div>
        </div>

      </div>
       {/* 分页模块 */}
       <div className={styles.doctorList}>
        {
          doctorList.length>0&&doctorList.map((v,i)=>{
             return <div key={v.doctorId} className={styles.doctorListCard} onClick={()=>handelDcotorCard(i)}>
                 <img src={v.imagePic} alt="" />
                 <div  className={`${styles.everydoctorName} ${FirstInd===i?styles.active:''}`}>{v.doctorName}</div>
             </div>
          })
        }
        
   {doctorListPage===1?"":<IconFont name='icon-chevronsleftshuangzuojiantou-copy-copy' className={styles.LefttBut}  onClick={()=>handelLeftPage()}></IconFont>}
   {doctorList.length===0||doctorList.length<3?"": <IconFont name='icon-arrowrightdl'  className={styles.RightBut}  onClick={()=>handelRightPage()}></IconFont>}
   
       </div>
   
    </div>
  )
}
